<i18n>
{
    "en": {
        "test": "This is test text. This page's international language use single file components. "
    },
    "zh": {
        "test": "这是测试文字。本页的国际化设置使用的单文件组件形式。"
    }
}

</i18n>
<template>
  <div class="sys-page">
    <v-title title="国际化插件"/>
    <v-notes>
      <p>本页实际路径：src/views/i18n/i18n.vue</p>
      <p>本系统使用vue-i18n作为语言国际化插件，未进行二次封装。点此查看插件官方文档：
        <a target="_blank" href="http://kazupon.github.io/vue-i18n/en"> http://kazupon.github.io/vue-i18n/en</a>
      </p>
      <p>本系统国际化不完全，仅有点击账户名时“修改密码”及“退出”文字可以切换，部分ElementUI自带组件也会切换。当然你也可以右上角的语言切换按钮进行切换。</p>
    </v-notes>
    <div class="page-content">
      <div class="sys-article">
        <p>本系统的国际化采用语言包懒加载策略。在系统启动时，根据状态及配置项，页面仅加载对应的语言。当切换语言环境时，对语言包进行懒加载，同时自动判别是否已经加载过该语言包文件。在构建生产环境时会对每种语言进行单独打包。</p>
      </div>
      <v-section title="使用方法" v-once>
        <div class="sys-article">
          <h2>创建及配置语言包</h2>
          <p>在<code>src/lang</code>下，创建语言包对应的语言文件，以key-value格式进行存储。保证在不同文件中key值相同。具体可参考<code>src/lang</code>中的对应代码。以下为示例</p>
          <pre v-pre class="sys-pre"><code>
            // en.js
            export default {
            editpassword: 'Edit Password',
            logout: 'Logout'
            }

            // zh-cn.js
            export default {
            editpassword: '修改密码',
            logout: '退出登录'
            }
          </code></pre>
          <p>创建完成后，在<code>src/lang/index.js</code>中配置语言包的对应名称。注意：该名称需要与以后切换语言时的参数相同，并且与语言包名称相同。</p>
        </div>
        <div class="sys-article">
          <h2>设置默认语言</h2>
          <p>在<code>src/util/i18n.js</code>中修改如下代码。需要注意，locale及fallbackLocale的值需要相同，并且与<code>src/lang/index.js</code>中的Key值保证一致。</p>
          <pre v-pre class="sys-pre"><code>
            const i18n = new VueI18n({
            // 当前语言环境
            locale: 'zhCN',
            // 默认语言环境。如果locale中无匹配项则采用该项值
            fallbackLocale: 'zhCN',
            messages
            })
          </code></pre>
        </div>
        <div class="sys-article">
          <h2>加载默认语言包</h2>
          <p>在起始页中进行默认语言包加载。示例详情查看：<code>src/index.vue</code></p>
          <pre v-pre class="sys-pre"><code>
            export default {
            // 加载默认语言包
            created(){
            let defLang = Cookie.get('lang') || this.$i18n.locale
            this.$store.dispatch("loadLang", defLang)
            }
            }
          </code></pre>
        </div>
        <div class="sys-article">
          <h2>语言切换</h2>
          <p>使用<code>loadLang(lang)</code>方法进行语言切换。该方法被注册在vuex，每次执行时同时更新cookie中的lang值。所以只需引入vuex，再进行调用即可。</p>

          <pre v-pre class="sys-pre"><code>
            &lt;el-button :type="lang=='zhCN' ? 'primary': 'text'"  @click="changeLang('zhCN')"&gt;中文简体&lt;/el-button&gt;
            &lt;el-button :type="lang=='en' ? 'primary': 'text'"  @click="changeLang('en')"&gt;英文&lt;/el-button&gt;

            import {mapState, mapActions} from 'vuex'
            export default {
            ...
            computed: {
            ...mapState({
            // 读取当前系统语言
            lang: state => state.lang
            })
            },
            methods:{
            ...mapActions({
            loadLang: 'loadLang'
            }),
            // button执行事件
            changeLang(val){
            if(val == this.lang) return
            this.loadLang(val)
            }
            }
            }
          </code></pre>
        </div>
      </v-section>

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'I18n',
  data() {
    return {}
  },
  computed: {
    ...mapState({
      lang: state => state.lang
    })
  },
  methods: {
    ...mapMutations({
      toggleLang: 'changeLang'
    }),
    changeLang(val) {
      if (val === this.lang) return
      this.toggleLang(val)
    }
  }
}
</script>
